<!DOCTYPE html>
<html>

<head>

    <script type="text/javascript" src="../jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="../stomp.min.js"></script>
    <script type="text/javascript" src="../sockjs.js"></script>
</head>
<script>
    var stompClient = null;
    //var userId = Math.random().toString(36).substr(2);
    var userId = 11;

    $(function() {
        startServer();
    })

    function startServer() {
        var url = 'webServer';
        var socket = new SockJS(url);
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function(frame) {
            //初始化
            stompClient.subscribe('/msg/init/' + userId, function (initData) {
                console.log(initData);
                var body = JSON.parse(initData.body);
                var chat = body.chat;
                chat.forEach(function(item) {
                    showChat(item);
                });
            });
            //广播回调
            stompClient.subscribe('/topic/live', function(message){
                var json = JSON.parse(message.body);
                showChat(json);
            });
            //广播方式实现点对点回调
            stompClient.subscribe('/topic/point' + userId, function (message) {
                var json = JSON.parse(message.body);
                showChat(json);
            });

            //点对点方式回调
            stompClient.subscribe('/topic/message', function(message){
                var json = JSON.parse(message.body);
                showChat(json);
            });
            //点对点方式回调
            stompClient.subscribe('/user/topic/point', function(message){
                 var json = JSON.parse(message.body);
                 showChat(json);
            });


        });
        //强制关闭浏览器断开连接
        window.onbeforeunload = function() {
            if (stompClient != null) {
                stompClient.disconnect();
            }
        }
    }

    function closeServer() {
        if (stompClient != null) {
            stompClient.disconnect();
        }
    }

    function sendTopic() {
        var input = $('#topic_input');
        var inputValue = input.val();
        input.val("");
        stompClient.send("/msg/live", {}, JSON.stringify({
            'name' : encodeURIComponent('广播'),
            'msg' : encodeURIComponent(inputValue)
        }));
    }

    function sendPoint() {
        var input = $('#point_input');
        var inputValue = input.val();
        input.val("");
        stompClient.send("/msg/point", {}, JSON.stringify({
            'name' : encodeURIComponent('广播点对点'),
            'msg': encodeURIComponent(inputValue),
            'coordinationId': userId
        }));
    }

    function sendUser() {
        var input = $('#user_input');
        var inputValue = input.val();
        input.val("");
        stompClient.send("/msg/message", {}, JSON.stringify({
            'name' : encodeURIComponent('点对点'),
            'msg': encodeURIComponent(inputValue),
            'coordinationId': userId
        }));
    }

    function sendP2P() {
        var input = $('#p2p_input');
        var inputValue = input.val();
        input.val("");
        stompClient.send("/msg/real", {}, JSON.stringify({
            'name' : encodeURIComponent('点对点'),
            'msg': encodeURIComponent(inputValue),
            'coordinationId': userId
        }));
    }

    function showChat(message) {
        var value = decodeURIComponent(message.name) + ':' + decodeURIComponent(message.msg) + '\n';
        var content = $("#topic_content").val() + value;
        $("#topic_content").text(content);
    }
</script>
<body>
<div>
    <input id="topic_input" type="text"/>
    <input type="button" onclick="sendTopic();" value="send广播"/>
</div>

<div>
    <input id="point_input" type="text"/>
    <input type="button" onclick="sendPoint();" value="send广播点对点"/>
</div>

<div>
    <input id="user_input" type="text"/>
    <input type="button" onclick="sendUser();" value="send点对点"/>
</div>


<div>
    <input id="p2p_input" type="text"/>
    <input type="button" onclick="sendP2P();" value="send1点对点"/>
</div>


<div>
    <textarea id="topic_content" style="width:200px;height:80px;"></textarea>
</div>
</body>
</html>
